<template>
  <div class="app-container">
    <el-row class="head">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="6.s25rem"
      >
        <el-col :span="6">
          <el-form-item class="first-form" label="数据表名:" prop="tableName">
            <el-input
              v-model="queryParams.tableName"
              placeholder="请输入数据表名"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="模板类型:" prop="tag">
            <el-select
              v-model="queryParams.value"
              size="small"
              placeholder="请选择"
            >
              <el-option
                v-for="(k, index) in cardState"
                :key="index"
                :label="k"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item class="caoz">
            <el-button
              class="search-btn"
              type="danger"
              icon="el-icon-search"
              @click="handleQuery()"
              >搜索</el-button
            >
            <el-button
              @click="resetQuery()"
              class="reset-btn"
              icon="el-icon-refresh-right"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-row class="card-list" v-loading="loading">
      <div class="card-title">导入模板</div>
      <el-col :span="6" v-for="(o, index) in scckocMetaList" :key="index">
        <el-card shadow="never" class="data-card" :body-style="{ padding: 0 }">
          <div style="font-size: 18px; font-weight: bold">
            {{ o.templateName }}
          </div>
          <div class="card-img"></div>
          <div class="dn-card">
            {{ o.createTime }} {{ o.name == null ? "admin" : o.name }}
          </div>
          <div :class="'card-state' + o.type">{{ cardState[o.type] }}</div>
          <div class="caozuo">
            <el-link
              :underline="false"
              type="primary"
              style="font-size: 18px"
              @click="handleDetail(o)"
              >{{ " " }}详情{{ " " }}</el-link
            >
            <!-- <el-link :underline="false" type="danger" @click="showDel(o)"
              >{{ " " }}删除</el-link
            > -->
            <div
              class="input-count"
              style="font-size: 15px; margin: 0px 0px 0px 140px"
            >
              导入次数：{{ o.count }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="page"
      :page-sizes="[12, 16, 20, 24]"
      :page-size="pageSize"
      layout="sizes,prev, pager, next"
      :total="datatotal"
    >
    </el-pagination>
    <!-- 删除对话框 -->
    <el-dialog
      :visible.sync="delShow"
      width="480px"
      append-to-body
      class="del-dialog"
    >
      <div class="del-img"></div>
      <div class="del-msg">
        <div class="msg1">
          确认要删除<span>{{ dialogName }}</span
          >吗？
        </div>
        <div class="msg2">删除后数据不可恢复！请谨慎操作！</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel" @click="cancel">取 消</el-button>
        <el-button class="commit" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listTemplate,
  findTemplate,
  findTemplateHnull,
  findTemplateAllnull,
} from "@/api/burnPower/interface";
export default {
  name: "dataInputMd",
  data() {
    return {
      //分页
      page: 1,
      pageSize: 12,
      datatotal: null,

      scckocMetaList: [],
      total: 0,

      // 查询参数
      queryParams: {
        pageNum: 1,
        //pageSize未绑定分页页号
        pageSize: 12,
        //表名
        tableName: null,
        schemaId: null,
        total: null,
        dataState: null,
        dataSource: null,
        dataType: "R",
        storeLoc: null,
        createrId: null,
        //选择框内容
        value: null,
      },

      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 导入遮罩层
      uploadLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 弹出层标题
      title: "",
      // 是否显示导入文件弹窗
      uploadVisibile: false,
      // 是否显示弹出层
      open: false,
      delShow: false,
      delId: null,
      dialogName: "",
      // 查询参数
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 12,
      // },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      cardState: [
        "其他",
        "物种",
        "热力学",
        "实验高温热物性",
        "动力学",
        "层流",
        "点火",
        "输运",
        "物种浓度",
      ],
      //导入数据信息
      uploadFileData: { templateId: null, createId: null, dataSource: null },
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getClearData();
    },
    handleCurrentChange(o) {
      this.page = o;
      console.log(o);
      this.getClearData();
    },
    getList() {
      this.loading = true;
      let pageNum = this.page;
      this.pageSize;
      listTemplate(pageNum, this.pageSize).then((response) => {
        this.scckocMetaList = response.rows;
        this.datatotal = Number.parseInt(response.total);
        console.log("33333333333", response);
        this.loading = false;
      });
    },
    handleDetail(row) {
      this.$router.push({
        path: "/input/dataInputMd/dataInputDetail",
        query: row,
      });
    },

    //搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log("queryParams" + this.queryParams.templateName);
      let tbname = this.queryParams.tableName;
      let type = this.queryParams.value;
      //乱起名字
      let createTime = "null";
      let page = this.queryParams.pageNum;
      let size = this.queryParams.pageSize;
      console.log("tbname", tbname);
      if (tbname === "") {
        tbname = "null";
      }
      if (tbname == " " || tbname == null) {
        tbname = "null";
        findTemplateHnull(createTime, type, page, size).then((res) => {
          //  = JSON.parse(res.data);
          console.log(res);
          this.scckocMetaList = res.rows;
          if (this.scckocMetaList.length === 0) {
            this.$message.error("数据库中未找到符合要求的数据");
          }
        });
      } else {
        //模板查询接口方法
        findTemplate(tbname, createTime, type, page, size).then((res) => {
          //  = JSON.parse(res.data);
          console.log(res);
          this.scckocMetaList = res.rows;
          // console.log("res.data", JSON.stringify(res.data.data));
          console.log("data ", this.scckocMetaList);
          if (this.scckocMetaList.length === 0) {
            this.$message.error("数据库中未找到符合要求的数据");
          }
          // console.log("this.ids " + this.ids);
        });
      }
    },

    //重置按钮操作
    resetQuery() {
      this.getList();
      this.queryParams.value = null;
      this.queryParams.tableName = "";
    },
    // 取消按钮操作
    cancel() {
      this.open = false;
      this.delShow = false;
      this.ids = [];
      this.delId = null;
    },

    // 删除按钮操作
    showDel(item) {
      this.delId = item.id;
      this.delShow = true;
      this.dialogName = item.tableAlias;
      console.log(item);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  // margin-left: 37px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 37px;
}
::v-deep.first-form {
  .el-form-item__label {
    margin-left: 0;
    font-size: 16px;
  }
}
::v-deep .el-input--small .el-input__inner {
  width: 160px;
  height: 32px;
  background: #ffffff;
  border-radius: 4px 4px 4px 4px;
  font-size: 16px;
  opacity: 1;
  border: 1px solid #eeeeee;
}
.head {
  min-width: 1152px;
  height: 4.8125rem;
  background: #ffffff;
  margin: 0 1.5rem 0.6875rem 0;
  padding: 1.25rem 0.9375rem;
  border-radius: 0.5rem;
}
.caoz {
  padding-left: 5px;
  width: 271px;
  float: right;
}
::v-deep .el-form .el-button {
  font-size: 14px;

  font-weight: 400;
}
.search-btn {
  padding: 0 1.25rem;
  width: 128px;
  height: 2rem;
  color: #ffffff;
  background: #bd4541;
  border-radius: 0.25rem;
}
.reset-btn {
  padding: 0 1.25rem;
  height: 2rem;
  width: 128px;
  font-size: 0.875rem;
  border: 1px solid #eeeeee;
  border-radius: 0.25rem;
}
.card-list {
  position: relative;
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  padding-top: 2.5rem;
  padding-left: 1rem;
  // height: 49.375rem;
  border-radius: 0.25rem;
  background: #ffffff;
}
.card-title {
  position: absolute;
  top: 19px;
  height: 16px;

  font-size: 18px;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.pagination-container {
  background: #f5f5f5;
  min-width: 1152px;
  // .el-pagination {
  // right: 1.3125rem;
  // position: absolute;
  // }
}
.data-card {
  padding: 14px 18px 0 16px;
  margin-bottom: 13px;
  position: relative;
  width: 320px;
  height: 186px;
  background: #ffffff;
  border-radius: 5px;
  opacity: 1;

  border: 1px solid #f5f5f5;
  .card-img {
    position: absolute;
    right: 18px;
    top: 40px;
    width: 26px;
    height: 26px;
    margin-top: 16px;
    background: url("./icon.png");
    background-size: cover;
  }
  .el-icon-date {
    width: 14px;
  }
  .dn-card {
    color: #575757;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 500;
    line-height: 0.9375rem;
  }
  .card-state {
    &4 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #f5fff6;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #479706;
      margin-top: 20px;
    }
    &5 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff9f5;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #ff7c24;
      margin-top: 20px;
    }
    &6 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #dc322f;
      margin-top: 20px;
    }
    &7 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #00ab6f;
      margin-top: 20px;
    }
    &9 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #f7f5ff;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #8146ff;
      margin-top: 20px;
    }
    &10 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #dc322f;
      margin-top: 20px;
    }
    &11 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #dc322f;
      margin-top: 20px;
    }
    &12 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #bfbf00;
      margin-top: 20px;
    }
    &13 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #7b4d12;
      margin-top: 20px;
    }
    &1 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #f59a23;
      margin-top: 20px;
    }
    &2 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #02a7f0;
      margin-top: 20px;
    }
    &0 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #ec808d;
      margin-top: 20px;
    }
    &3 {
      width: 154px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #8080ff;
      margin-top: 20px;
    }
    &14 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #5a5a5a;
      margin-top: 20px;
    }
    &15 {
      width: 84px;
      height: 24px;
      font-size: 18px;
      background: #fff8f8;
      border-radius: 33px;
      opacity: 1;
      text-align: center;
      font-weight: 600;
      color: #5a5a5a;
      margin-top: 20px;
    }
  }
  .caozuo {
    position: absolute;
    display: flex;
    right: 18px;
    left: 16px;
    bottom: 13px;
    height: 24px;
    // background-color: #2B40FF;
    .lc {
      height: 1.9rem;
      .m1 {
        cursor: pointer; // 鼠标变手型
        width: 8.3125rem;
        height: 1.9rem !important;
        margin: 0;
        padding: 0;
        .jinruliu {
          width: 24px;
          height: 24px;
          display: inline-block;
          // border: 1px solid #4353E4;
          // border-radius: 50%;
          // padding: .125rem;

          background-size: cover;
        }
        .liu {
          display: inline-block;
          vertical-align: top;
          margin-left: 8px;
          font-size: 16px;
          font-weight: 500;
          color: #4353e4;
          height: 24px;
          line-height: 24px;
        }
      }
      .m2 {
        cursor: not-allowed; //鼠标禁止
        width: 8.3125rem;
        height: 24px !important;
        margin: 0;
        padding: 0;
        .jinruliu {
          width: 24px;
          height: 24px;
          display: inline-block;

          background-size: cover;
          border: 1px solid rgb(167, 167, 167);
          border-radius: 50%;
          font-size: 23px;
        }
        .liu {
          display: inline-block;
          vertical-align: top;
          margin-left: 8px;
          font-size: 16px;
          font-weight: 500;
          color: #bcbcbc;
          height: 24px;
          line-height: 24px;
        }
      }
    }
    .el-link {
      font-size: 13px;
      line-height: 24px;
      height: 24px;
      margin-right: 5px;
      font-weight: 400;
      &.el-link--primary {
        color: #4353e4;
      }
      &.el-link--info {
        color: #cccccc;
      }
      float: right;
      &.el-link--danger {
        color: #bd4541;
      }
    }
  }
}
.cancel {
  border: 0;
  height: 31px;
  font-size: 14px;
  padding: 0 10px;
  font-weight: 400;
  color: #666666;
}
.commit {
  width: 128px;
  height: 31px;
  font-size: 14px;
  padding: 0;
  font-weight: 400;
  color: #ffffff;
  // line-height: 31px;
  background: #bd4541;
  border-radius: 4px;
  border: 0;
}
::v-deep .el-dialog {
  border-radius: 10px;
  // height: 288px;
  // top: 158px;
  &__body {
    padding-bottom: 0;
    padding-top: 0;
    padding: 10px 38px 10px 38px;
  }
  &__header {
    padding: 10px 38px 10px 38px;
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
    }
  }
  &__footer {
    padding: 10px 38px 20px 38px;
  }
  .el-input__inner {
    width: 248px;
    height: 31px;
    border-radius: 5px;
    margin-left: 15px;
    font-size: 14px;

    font-weight: 400;
  }
  .el-form-item__label {
    margin: 0;
  }
  .el-radio-button {
    margin-left: 15px;
    &__inner {
      width: 124px;
      height: 31px;
      // background: #BD4541;
      border-radius: 4px 4px 4px 4px;
    }
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #bd4541;
    border-color: #bd4541;
  }
}

.form-table {
  padding: 0;
  width: 409px;
  height: 201px;
  margin-left: 15px;
  border-radius: 6px;
  opacity: 1;
  border: 1px solid #eeeeee;
  // overflow:auto;
  ::v-deep .el-table td,
  .el-table th {
    padding: 6px 0;
  }
}

.del-dialog {
  ::v-deep .el-dialog {
    height: 270px;
  }
  .del-img {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    background: url("../../../assets/images/warnning.png");
    background-size: cover;
  }
  .del-msg {
    margin-top: 14px;
    text-align: center;
    .msg1 {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      span {
        color: #bd4541;
      }
    }
    .msg2 {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 400;
      color: #bd4541;
    }
  }
  .dialog-footer {
    margin-top: 37px;
  }
}
</style>
